// src/pages/Home/PermissionOverview/index.js
import React from 'react';
import { Row, Col, Card, Statistic, Table, Space } from 'antd';
import {
  UserOutlined,
  SafetyCertificateOutlined,
  LockOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons';

const PermissionOverview = () => {
  const permissionStats = {
    totalPermissions: 24,
    activePermissions: 22,
    totalRoles: 5,
    activeRoles: 4
  };

  const permissionData = [
    { id: 1, name: '用户管理', code: 'user:*', type: '菜单权限', status: 'active' },
    { id: 2, name: '查看用户列表', code: 'user:list', type: '操作权限', status: 'active' },
    { id: 3, name: '创建用户', code: 'user:create', type: '操作权限', status: 'active' },
    { id: 4, name: '编辑用户', code: 'user:edit', type: '操作权限', status: 'active' },
    { id: 5, name: '删除用户', code: 'user:delete', type: '操作权限', status: 'inactive' },
  ];

  const roleData = [
    { id: 1, name: '系统管理员', users: 3, permissions: 24, status: 'active' },
    { id: 2, name: '人事专员', users: 8, permissions: 12, status: 'active' },
    { id: 3, name: '财务专员', users: 5, permissions: 10, status: 'active' },
    { id: 4, name: '普通用户', users: 126, permissions: 4, status: 'active' },
    { id: 5, name: '访客角色', users: 0, permissions: 2, status: 'inactive' },
  ];

  const permissionColumns = [
    { title: '权限名称', dataIndex: 'name', key: 'name' },
    { title: '权限代码', dataIndex: 'code', key: 'code' },
    { title: '类型', dataIndex: 'type', key: 'type' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        status === 'active' ?
        <CheckCircleOutlined style={{ color: '#52c41a' }} /> :
        <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
      )
    },
  ];

  const roleColumns = [
    { title: '角色名称', dataIndex: 'name', key: 'name' },
    { title: '用户数', dataIndex: 'users', key: 'users' },
    { title: '权限数', dataIndex: 'permissions', key: 'permissions' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        status === 'active' ?
        <CheckCircleOutlined style={{ color: '#52c41a' }} /> :
        <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
      )
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: 24 }}>
        <h2>权限控制概览</h2>
        <p>系统权限和角色的总体情况</p>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总权限数"
              value={permissionStats.totalPermissions}
              prefix={<LockOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="启用权限"
              value={permissionStats.activePermissions}
              prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="总角色数"
              value={permissionStats.totalRoles}
              prefix={<SafetyCertificateOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="启用角色"
              value={permissionStats.activeRoles}
              prefix={<UserOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="权限列表" size="small">
            <Table
              dataSource={permissionData}
              columns={permissionColumns}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="角色列表" size="small">
            <Table
              dataSource={roleData}
              columns={roleColumns}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default PermissionOverview;
